<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程表详情 - 滇西科技师范学院课程表展示系统</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- Bootstrap Icons - 本地文件 -->
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 头部 -->
        <header class="bg-primary text-white py-3 mb-4">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1 class="h3 mb-0">
                            <i class="bi bi-calendar3"></i>
                            <span id="className">课程表详情</span>
                        </h1>
                        <p class="mb-0 mt-1" id="classInfo">加载中...</p>
                    </div>
                    <div class="col-md-4 text-end">
                        <a href="/" class="btn btn-light">
                            <i class="bi bi-arrow-left"></i>
                            返回班级列表
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主要内容 -->
        <div class="container">
            <!-- 课程表表格 -->
            <div class="card shadow">
                <div class="card-header bg-light">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h5 class="mb-0">
                                <i class="bi bi-table"></i>
                                课程表
                            </h5>
                        </div>
                        <div class="col-md-6 text-end">
                            <div class="d-flex gap-2 justify-content-end align-items-center">
                                <!-- 主题选择器 -->
                                <div class="dropdown">
                                    <button class="btn btn-outline-info btn-sm dropdown-toggle" type="button" id="themeSelector" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="bi bi-palette"></i>
                                        <span id="currentThemeName">清新简约</span>
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="themeSelector">
                                        <li><a class="dropdown-item theme-option" href="#" data-theme="fresh">
                                            <i class="bi bi-circle-fill text-primary me-2"></i>清新简约
                                        </a></li>
                                        <li><a class="dropdown-item theme-option" href="#" data-theme="warm">
                                            <i class="bi bi-circle-fill text-warning me-2"></i>温暖学院
                                        </a></li>
                                        <li><a class="dropdown-item theme-option" href="#" data-theme="professional">
                                            <i class="bi bi-circle-fill text-dark me-2"></i>商务专业
                                        </a></li>
                                        <li><a class="dropdown-item theme-option" href="#" data-theme="eyecare">
                                            <i class="bi bi-circle-fill text-success me-2"></i>护眼绿色
                                        </a></li>
                                    </ul>
                                </div>

                                <!-- 功能按钮 -->
                                <div class="btn-group btn-group-sm" role="group">
                                    <button type="button" class="btn btn-outline-secondary" id="toggleNowLineBtn" title="显示/隐藏当前时间指示">
                                        <i class="bi bi-clock-history"></i>
                                        <span class="d-none d-sm-inline">当前指示</span>
                                    </button>
                                    <button type="button" class="btn btn-outline-primary" id="exportImageBtn">
                                        <i class="bi bi-image"></i>
                                        导出图片
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" id="printBtn">
                                        <i class="bi bi-printer"></i>
                                        打印
                                    </button>
                                    <button type="button" class="btn btn-outline-success" id="exportTodayBtn">
                                        <i class="bi bi-calendar-day"></i>
                                        今日清单
                                    </button>
                                    <button type="button" class="btn btn-outline-success" id="exportWeekListBtn">
                                        <i class="bi bi-clipboard-data"></i>
                                        周清单
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive position-relative" id="scheduleContainer">
                        <table class="table table-bordered table-hover mb-0" id="scheduleTable">
                            <thead class="table-dark">
                                <tr>
                                    <th class="text-center" style="width: 80px;">时间</th>
                                    <th class="text-center">星期一</th>
                                    <th class="text-center">星期二</th>
                                    <th class="text-center">星期三</th>
                                    <th class="text-center">星期四</th>
                                    <th class="text-center">星期五</th>
                                    <th class="text-center">星期六</th>
                                    <th class="text-center">星期日</th>
                                </tr>
                            </thead>
                            <tbody id="scheduleBody">
                                <!-- 课程表内容将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                        <div id="todayColOverlay" class="today-col-overlay" style="display:none;"></div>
                        <div id="nowLine" class="now-line" style="display:none;"></div>
                    </div>
                </div>
            </div>

            <!-- 课程详情列表 -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="bi bi-list-ul"></i>
                                课程详情
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row" id="courseList">
                                <!-- 课程详情将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <p class="mb-2 text-muted">
                        🏫 滇西科技师范学院 → 信息学院 | 
                        👤 <strong>张绕坤</strong> | 
                        ✉️ <a href="mailto:2986517697@qq.com" class="text-decoration-none">2986517697@qq.com</a> | 
                        📱 15391430821
                    </p>
                    <p class="mb-0 text-muted small">
                        💡 功能点反馈，有建议欢迎找我！欢迎提出宝贵意见和建议，一起完善这个系统！
                    </p>
                    <p class="mt-2 mb-0 text-muted small">
                        💻 让我们一起打造更好的课程表管理系统！
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- 课程详情模态框 -->
    <div class="modal fade" id="courseModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="courseModalTitle">课程详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="courseModalBody">
                    <!-- 课程详情内容 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 今日清单模态框 -->
    <div class="modal fade" id="todayModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">今日清单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="todayListBody">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 周清单模态框 -->
    <div class="modal fade" id="weekListModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">本周上课清单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2 text-muted small" id="weekRangeText"></div>
                    <pre class="mb-0" id="weekListBody" style="white-space: pre-wrap;"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" id="copyWeekListBtn">复制</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载提示 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-3">正在加载课程表...</p>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <!-- html2canvas 用于将课表导出为图片（如需本地化，可替换为本地路径） -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> -->
    <script src="{{ url_for('static', filename='js/html2canvas.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/schedule.js') }}"></script>
</body>
</html>
